<template>
  <el-dialog v-model="dialogVisible" :title="' '" width="1000px">
    <el-descriptions :column="3" border style="margin-top: 10px;">
      <el-descriptions-item label="项目名称">
        {{ projectData.proname }}
      </el-descriptions-item>
      <el-descriptions-item label="项目编码">
        {{ projectData.proidstr }}
      </el-descriptions-item>
      <el-descriptions-item label="时间">
        {{ projectData.lxsj }}
      </el-descriptions-item>
      <el-descriptions-item label="地点">
        {{ projectData.prodqName }}
      </el-descriptions-item>
      <el-descriptions-item label="年度">
        {{ projectData.lxyear }}
      </el-descriptions-item>
    </el-descriptions>
    <el-skeleton :loading="loading" animated>
      <template #template>
        <el-skeleton-item variant="text" style="width: 100%" />
        <el-skeleton-item variant="text" style="width: 100%" />
        <el-skeleton-item variant="text" style="width: 60%" />
      </template>
      <template #default>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号" width="60" :index="calculateIndex" />
          <el-table-column prop="archcode" label="案卷档号" width="180" />
          <el-table-column prop="title" label="案卷题名" width="480" />
          <el-table-column prop="relatecode" label="互见号" />
          <el-table-column prop="xmfzr" label="项目负责人" />
          <el-table-column label="操作" width="120">
            <template #default="{ row }">
              <el-button type="primary" link @click="handleViewDetails(row)">
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination 
          v-model:current-page="currentPage" 
          v-model:page-size="pageSize" 
          :total="total"
          @current-change="handleCurrentChange" 
          @size-change="handleSizeChange"
          :page-sizes="[20, 50, 100, 200]"
          layout="sizes, prev, pager, next, total" 
          class="pagination" />
      </template>
    </el-skeleton>
    <!-- 添加卷册详情弹窗 -->
    <VolumeDetailsModal v-model:visible="volumeModalVisible" :volumeId="selectedVolumeId"
      :volumeData="selectedVolumeData" />
  </el-dialog>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import request from '@/utils/request';
import VolumeDetailsModal from './VolumeDetailsModal.vue';

const props = defineProps({
  visible: Boolean,
  projectData: Object,
  loading: Boolean,
  projectId: [String, Number],
});

const emit = defineEmits(['update:visible']);

const dialogVisible = ref(props.visible);
const loading = ref(props.loading);
const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(100);
const total = ref(0);
const volumeModalVisible = ref(false);
const selectedVolumeId = ref(null);
const selectedVolumeData = ref(null);

watch(() => props.visible, (newValue) => {
  if(props.visible){
    currentPage.value = 1;
    fetchData()
  }
  dialogVisible.value = newValue;
});

watch(dialogVisible, (newValue) => {
  emit('update:visible', newValue);
});

const fetchData = async () => {
  console.log(props.projectData.value)
  try {
    loading.value = true;
    const { data } = await request.post('/zhsj/api/getvolumebyid', null, {
      params: {
        pageindex: currentPage.value - 1,
        pagesize: pageSize.value,
        projectid: props.projectId
      }
    });
    console.log(data);
    tableData.value = data.records || [];
    total.value = data.total || 0;
  } catch (error) {
    console.error('Failed to load project details:', error);
    // 这里可以添加错误处理，比如显示一个错误提示
  } finally {
    loading.value = false;
  }
};

const handleCurrentChange = (page) => {
  currentPage.value = page;
  fetchData();
};

// 添加页面大小改变的处理函数
const handleSizeChange = (size) => {
  pageSize.value = size;
  currentPage.value = 1;
  fetchData();
};

onMounted(() => {
  // if (props.projectId) {
  //   fetchData();
  // }
});

watch(() => props.projectId, (newValue) => {
  currentPage.value = 1;
  // fetchData();
});

// 添加计算序号的方法
const calculateIndex = (index) => {
  return (currentPage.value - 1) * pageSize.value + index + 1;
};

// 修改查看详情处理函数
const handleViewDetails = (row) => {
  selectedVolumeId.value = row.idstr;
  selectedVolumeData.value = row;
  volumeModalVisible.value = true;
};
</script>

<style scoped>
.custom-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.custom-header h3 {
  margin: 0;
  font-size: 18px;
}

.project-code {
  margin: 5px 0 0;
  font-size: 14px;
  color: #666;
}

.dialog-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
}

.project-description {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  width: 100%;
  /* 确保占满容器宽度 */
}
</style>
